import React, { Component } from 'react';
import { Divider, Popconfirm, Switch, Tag, Modal} from 'antd';
import { createList } from '/common/components/HocCRUD';
import { map, isObject } from 'lodash';
import MainWrap from '/common/components/HocCRUD/MainWrap';
import * as config from './config';
import { actionFunc } from '@/pages/Host';
import SwitchComp from '/common/componentsTpl/SwitchComp';
import ButtonComp from '/common/componentsTpl/ButtonComp';
import { resetPsw } from './service';


@createList({
  config,
  initSearchData: (props, data) => {
    return {
      ...data,
      fuzzyMatch: 'code,name,phone',
    };
  },
  initFilterData: null,
})
export default class Admin extends Component {
  state = {
    password:""
  }
  /**
   * 状态开关
   * @param checked
   * @param record
   */
  toggleState(checked, record) {
    const { dispatch } = this.props;
    dispatch({
      type: 'admin/toggleState',
      payload: { id: record.id },
    });
  }
  resetPassword(record){
      const data = {
        id:record.id
      };
      resetPsw(data)
      .then(res=>{
          const {data,msg,status} = res;
          if(status==200 || status == 1){
             this.setState({
              password:data
             })
             Modal.success({
              title: msg+" !  您的新密码为：",
              content: this.state.password,
            });
          }else{
            Modal.error({
              title: "服务器请求错误！",
              content: "请稍后再请求......",
            });
          }
      })
  }

  render() {

    const tableProps = {
      columns: [
        {
          title: '序号',
          dataIndex: 'no',
          key: 'no',
        },
        {
          title: '编码',
          dataIndex: 'code',
          key: 'code',
        },
        {
          title: '登录密码',
          dataIndex: 'password',
          key: 'password',
        },
        {
          title: '用户名称',
          dataIndex: 'name',
          key: 'name',
        },

        {
          title: '电话',
          dataIndex: 'phone',
          key: 'phone',
        },
        {
          title: '角色权限',
          dataIndex: 'roles',
          key: 'roles',
          render: (text, record) => {
            return (
              record.roles ? (
                map(record.roles, (o, k) => {
                  return (
                    <Tag key={`role_${o.id}_${k}`} color="cyan">{o.name}</Tag>
                  );
                })
              ) : ''
            );
          },
        },
        {
          title: '所属部门',
          dataIndex: 'dept',
          key: 'dept',
          render: (text) => {
            return (
              isObject(text) ? (text.name) : ''
            );
          },
        },
        // {
        //   title: '创建日期',
        //   dataIndex: 'createDate',
        //   key: 'createDate',
        //   render:(text,record)=>{
        //     return (
        //       record.createDate?myFormatTime(record.createDate):'-'
        //     );
        //   }
        // },
        {
          title: '开启状态',
          dataIndex: 'enabled',
          key: 'enabled',
          render: (text, record) => {
            return (
              <SwitchComp
                actionType={'toggleState'}
                checkedChildren="开"
                unCheckedChildren="关"
                onClick={e => this.toggleState(e, record)}
                checked={record.enabled}
                defaultChecked={record.enabled}/>
            );
          },
        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          render: (text, record) => (
          <>
          {
            actionFunc(this.props, text, record)
          }
          <Divider type='vertical'/>
            <Popconfirm
              title="确认重置密码吗?"
              onConfirm={()=>this.resetPassword(record)}
              okText="确认"
              cancelText="取消"
            >
            <ButtonComp btnType='a' actionType="resetPassword">重置密码</ButtonComp>
            </Popconfirm>
          </>
          ),
        },
      ],
    };

    return (
      <MainWrap
        {...this.props}
        tableProps={tableProps}
      >
        {
          this.props.children
        }
      </MainWrap>
    );
  }
}
